<template>
	<view class="content">
		<scroll-view scroll-y class="DrawerPage" :class="modalName=='viewModal'?'show':''">

			<!-- 顶部导航栏 -->
			<view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
				<!-- 定位城市 -->
				<view class="addr" @tap="showModal" data-target="viewModal">
					<view class="cuIcon-locationfill text-red"></view>
					{{ city.name }}
				</view>
				<!-- mSearch组件 如果使用原样式，删除组件元素-->
				<!-- 	<mSearch :readOnly="false" class="mSearch-input-box" :mode="1" button="inside" value="默认关键字" placeholder="默认关键字"
				 @tap="toSearch()" style="flex:1"></mSearch>
 -->
				<view class="input-box" @tap="toSearch()">
					<text class="icon icon-serach"></text>
					<text class="text-gray">点击进入搜索</text>
					<!-- <input @tap="toSearch()" :adjust-position="false" type="text" placeholder="点击进入搜索" readOnly="true"
					 confirm-type="search"></input> -->
				</view>
				<!-- 搜索框 -->
				<!-- <view class="input-box">
					<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" @tap="toSearch()" search />
					<view class="icon search"></view>
				</view> -->

			</view>
			<!-- 占位 -->
			<!-- <view v-if="showHeader" class="place"></view> -->
			<!-- 轮播图 -->
			<view class="swiper">
				<view class="swiper-box">
					<swiper :current="swiperIndex1" @animationfinish="swiperChange1" indicator-dots="true" circular="true" autoplay="true">
						<swiper-item v-for="(swiper,index1) in swiperList" :key="index1" :item-id="index1">
							<image mode="scaleToFill" :src="imgRoot+swiper.thumb" @tap="toSwiper" :data-houseId="swiper.appid"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 		<swiper class="screen-swiper round-dot"  indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(swiper,index) in swiperList" :key="swiper.id">
					<image :src="'http://test.km.scaqjg.com'+swiper.thumb" @tap="toSwiper" :data-houseId="swiper.appid"></image>
				</swiper-item>
			</swiper> -->

			<!-- 分类列表 -->
			<view class="category-list bg-white">
				<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{ row.name }}</view>
				</view>
			</view>
			<navigator :url="'../map/location?lat='+location.latitude+'&lng='+location.longitude" class="location bg-white margin-top">
				<view class="icon  text-sl padding"><text class="cuIcon-locationfill text-lg text-red"></text></view>
				<view>
					<view class="text-lg"><text class="text-black text-bold">{{location.poiName}}</text></view>
					<view class="text-sm"><text class="text-gray">{{location.address}}</text></view>
					<view><text class="text-black">距离您一公里的在售楼盘有：</text></view>
					<view>
						<view class="cu-tag bg-green">{{location.count}}</view>
					</view>
				</view>
			</navigator>
			<promotion-list :options="likeList" url="/pages/new/hot" title="热门楼盘"></promotion-list>

			<!-- 广告图 -->
			<view class="banner bg-white">
				<!-- <image src="/static/img/banner.jpg"></image> -->
				<swiper circular="true" :current="swiperIndex2" autoplay="true" @animationfinish="swiperChange2">
					<swiper-item v-for="(swiper,index2)  in advList" :key="index2" :item-id="index2">
						<image :src="imgRoot+swiper.thumb" @tap="toSwiper" :data-houseId="swiper.appid"></image>
					</swiper-item>
				</swiper>
			</view>

			<promotion-list :options="houseList" url="/pages/new/index" title="类住宅"></promotion-list>

			<!-- 为您推荐优秀的置业顾问 -->
			<view class="guwen bg-white">
				<view class="cu-bar bg-white margin-top solid-bottom">
					<view class="action"><text class="cuIcon-titles text-red"></text>为您推荐优秀的置业顾问</view>
					<navigator class="text-right" url="/pages/guwen/list?type=gw">更多>></navigator>
				</view>
				<view class="list">
					<view class="column" v-for="(row, index) in gwList" @tap="toGuwenDetail" :data-id="row.id" :key="index">
						<view class="top">
							<image mode="aspectFit" :src="(row.avatar.indexOf('http')!=-1)?row.avatar:imgRoot+row.avatar"></image>
						</view>
						<view class="center">
							<view class="name">{{ row.name }}</view>
							<view class="info">{{ row.platform }}</view>
							<view class="info">{{ row.housename }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 为您推荐优秀的渠道驻场 -->
			<view class="guwen bg-white">
				<view class="cu-bar bg-white margin-top solid-bottom">
					<view class="action"><text class="cuIcon-titles text-red"></text>优秀机构推荐</view>
					<navigator class="text-right" url="/pages/guwen/list?type=sale">更多>></navigator>
				</view>
				<view class="list">
					<view class="column" v-for="(row, index) in saleList" @tap="toGuwenDetail" :data-id="row.id" :key="index">
						<view class="top">
							<image mode="aspectFit" :src="(row.avatar.indexOf('http')!=-1)?row.avatar:imgRoot+row.avatar"></image>
						</view>
						<view class="center">
							<view class="name">{{ row.name }}</view>
							<view class="info">{{ row.platform }}</view>
							<view class="info">{{ row.housename }}</view>
						</view>
					</view>
				</view>
			</view>



			<view class="news bg-white" v-if="newsList.length>0">
				<view class="cu-bar bg-white margin-top solid-bottom">
					<view class="action"><text class="cuIcon-titles text-blue"></text>咨询新闻</view>
					<text class="text-right" @tap="toNewsList()">更多>></text>
				</view>
				<view class="list">
					<navigator class="row" v-for="(row, index) in newsList" :url="'/pages/news/detail/detail?id='+row.id" :key="index"
					 :data-id="row.id">
						<view class="img">
							<image mode="aspectFit" :src="row.thumb"></image>
						</view>
						<view class="info">
							<view class="name">{{ row.title }}</view>
							<view class="info">{{ row.des }}</view>
							<view class="info">{{ row.hits }}</view>
						</view>
					</navigator>
				</view>
			</view>


			<view class="cu-load load-modal" v-if="loadCount<2">
				<view class="cuIcon-emojifill text-orange"></view>
				<view class="gray-text">{{loadMoreDefalutText}}</view>
			</view>

		</scroll-view>

		<uni-drawer :visible="showLeft" mode="left" @close="closeDrawer">

			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in citys" :key="index">
					<button @tap="tabSelect" :data-city="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
		
		<!-- <view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 普通窗口
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showAdv" data-target="Modal">Modal</button>
			</view>
		</view> -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<!-- <view class="content">广告</view> -->
					<view class="action" @tap="hideAdv">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="padding: 10rpx;">
					<image style="width: 100%;" v-if="advContent.thumb!=null&advContent.thumb!=''" :src="imgRoot+advContent.thumb" ></image>
					<rich-text class="content" :nodes="advContent.query"   ></rich-text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import promotionList from '@/pages/index/promotion-list.vue';
	import uniDrawer from '@/components/uni-drawer.vue'
	//引用mSearch组件，如不需要删除即可
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	export default {
		components: {
			promotionList,
			uniDrawer,
			mSearch
		},
		data() {
			return {
				imgRoot: this.$rootUrl,
				showLeft: false,
				advContent:null,
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'relative',
				loadMoreDefalutText: "正在加载...",
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				city: {
					id: 1,
					name: '成都市'
				},
				modalName: null,
				currentSwiper: 0,
				likeList: [],
				houseList: [],
				gwList: [],
				saleList: [],
				advList: [],
				swiperIndex1: "0",
				swiperIndex2: "0",
				citys: [{
					id: 1,
					name: '成都'
				}],
				loadCount: 0,
				location: {
					poiName: "",
					address: "",
					latitude: 0,
					longitude: 0,
					count: ""
				},
				// 轮播图片
				swiperList: [],
				// 分类菜单
				categoryList: [{
						id: 1,
						name: '新盘分销',
						img: '/static/img/category/1.png',
						type: 1,
						url: '/pages/new/index'
					},
					{
						id: 2,
						name: '二手租售',
						img: '/static/img/category/2.png',
						type: 1,
						url: '/pages/sale/index'
					},
					{
						id: 3,
						name: '热门楼盘',
						img: '/static/img/category/3.png',
						type: 2,
						url: '/pages/new/hot'
					},
					{
						id: 4,
						name: '地图找房',
						img: '/static/img/category/8.png',
						type: 2,
						url: '/pages/map/map'
					},
					// {
					// 	id: 5,
					// 	name: '追佣联盟',
					// 	img: '/static/img/category/5.png',
					// 	type: 2,
					// 	url: ''
					// },
					// {
					// 	id: 6,
					// 	name: '向上专场',
					// 	img: '/static/img/category/6.png',
					// 	type: 1,
					// 	url: '/pages/new/index'
					// },
					// {
					// 	id: 7,
					// 	name: '疯狂购房季',
					// 	img: '/static/img/category/7.png',
					// 	type: 1,
					// 	url: '/pages/new/index'
					// },
					// {
					// 	id: 8,
					// 	name: '私单名单',
					// 	img: '/static/img/category/4.png',
					// 	type: 2,
					// 	url: ''
					// }

				],
				newsList: [],

				loadingText: '正在加载...'
			};
		},
		// onPageScroll(e) {
		// 	//兼容iOS端下拉时顶部漂移
		// 	this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		// 	this.headerTop = e.scrollTop >= 0 ? null : 0;
		// 	this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		// },

		onLoad() {

			this.showAdv();
			// if (this.city.id != getApp().globalData.city.id) {
			// 	this.city = getApp().globalData.city;
			// 	console.log(this.city.name);
			// }
			
		},
		onShow() {

			var me=this;
			uni.getStorage({
				key: 'city',
				success: (res) => {
					if (!res.data) {
						return;
					}
					
					getApp().globalData.city = res.data;
					
					me.city=res.data;
					this.loadSwiperist();
					this.loadLocation();
					this.loadNewsList();
					this.loadLikeList();
					this.loadHouseList();
					this.loadSaleList();
					this.loadGwList();
					this.loadAdvList();
					this.loadCityList();
				},
				fail: (e) => {
					//this.toLogin(); 
					this.loadSwiperist();
					this.loadLocation();
					this.loadNewsList();
					this.loadLikeList();
					this.loadHouseList();
					this.loadSaleList();
					this.loadGwList();
					this.loadAdvList();
					this.loadCityList();
				}
			});
			
			
			
		},

		onShareAppMessage() {
			return {
				title: '选楼盘，查佣金，看房价'
			}
		},
		methods: {
			closeDrawer(e) {
				this.showLeft = false
			},
			showModal(e) {
				this.showLeft = true;
			},
			hideModal() {
				this.showLeft = false;
			},
			tabSelect(e) {
				
				this.city = e.currentTarget.dataset.city;
				//this.$city=e.currentTarget.dataset.name;
				getApp().globalData.city = e.currentTarget.dataset.city;
				
				uni.setStorage({
					key: "city",
					data: this.city
				});
				this.showLeft = false;
				this.loadCount = this.loadCount - 4;
				this.loadLikeList();
				this.loadHouseList();
				this.loadSwiperist();
				this.loadAdvList();
				this.loadNewsList();
				this.loadGwList();
				this.loadSaleList();
			},


			toHouseList() {
				uni.switchTab({
					url: '/pages/new/index'
				});
			},
			loadLocation() {
				var me = this;


				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						me.location.longitude = res.longitude;
						me.location.latitude = res.latitude;
						uni.request({
							url: me.$rootUrl + '/Home/GetLocation',
							data: {
								longitude: res.longitude,
								latitude: res.latitude
							},
							method: 'GET',
							success(res) {
								if (res.data.success) {
									me.location.poiName = res.data.data.addressName;
									me.location.address = res.data.data.address;
									me.location.count = res.data.data.houseList[0]
								} else {
									uni.showModal({
										content: '服务器错误!',
										showCancel: false
									});
								}
							},
							fail() {
								uni.showModal({
									content: me.connectionFailText,
									showCancel: false
								});
							}
						});
					}
				});
			},
			//搜索跳转
			toSearch() {
				uni.switchTab({
					url: '/pages/new/index'
				});
			},
			toNewsList() {
				uni.navigateTo({
					url: '/pages/news/list'
				});
			},
			toNews(e) {
				uni.navigateTo({
					url: '/pages/news/detail?id=' + e.id
				});
			},
			toGuwenList() {
				uni.navigateTo({
					url: '/pages/guwen/list'
				});
			},
			toGuwenDetail(e) {

				var id = e.currentTarget.dataset.id;
				var url = '/pages/guwen/detail?id=' + id;
				uni.navigateTo({
					url: url
				});
			},
			toZhuChangDetail(e) {
				var id = e.currentTarget.dataset.zhuchangid
				var url = '/pages/guwen/detail?id=' + id;
				uni.navigateTo({
					url: url
				});
			},
			toZhuChang() {
				uni.navigateTo({
					url: '/pages/zhuchang/list'
				});
			},
			//轮播图跳转
			toSwiper(e) {
				var houseid = e.currentTarget.dataset.houseid;
				if (houseid != "" && houseid != undefined) {
					uni.navigateTo({
						url: '/pages/new/detail/detail?id=' + houseid
					});
				}

			},
			//分类跳转
			toCategory(e) {
				//uni.showToast({title: e.name,icon:"none"});
				// uni.setStorageSync('catName', e.name);
				if (e.type == 1) {
					uni.switchTab({
						url: e.url
					});
				} else {
					uni.navigateTo({
						url: e.url
					});
				}

			},
			//猜你喜欢
			toPromotion(e) {
				uni.showToast({
					title: e.title,
					icon: 'none'
				});
			},
			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.goods_id,
					icon: 'none'
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},

			loadNewsList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/News/GetList',
					data: {
						page: 1,
						pageSize: 6,
						cityId: me.city.id,
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.newsList = res.data.items;
							me.loadCount++;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			loadCityList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Area/GetCityList',
					data: {},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.citys = res.data.items;
							getApp().globalData.citys = res.data.items;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//获取猜你喜欢列表
			loadLikeList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/House/GetList',
					data: {
						page: 1,
						pageSize: 3,
						channel: 'new',
						CityId: me.city.id,
						Hot: true
						//houseType: '住宅'
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.likeList = res.data.items;
							me.loadCount++;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//类住宅
			loadHouseList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/House/GetList',
					data: {
						page: 1,
						pageSize: 3,
						CityId: me.city.id,
						houseType: '公寓'
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.houseList = res.data.items;
							me.loadCount++;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//顾问列表
			loadGwList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Saler/GetList',
					data: {
						page: 1,
						pageSize: 3,
						type: 'gw',
						status: 2,
						cityId: me.city.id,
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.gwList = res.data.items;
							me.loadCount++;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//驻场列表
			loadSaleList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Saler/GetList',
					data: {
						page: 1,
						pageSize: 3,
						type: 'sale',
						status: 2,
						cityId: me.city.id,
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.saleList = res.data.items;
							me.loadCount++;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//获取轮播图
			loadSwiperist() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Adv/GetList',
					data: {
						page: 1,
						pageSize: 5,
						type: '轮播图',
						CityId: me.city.id,
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							if (res.data.items.length > 0) {
								me.swiperList = res.data.items;
							} else {
								me.swiperList = [{
									thumb: "",
									appid: ""
								}];
							}

							me.loadCount++;
							me.swiperIndex1 = "0";
							me.swiperIndex2 = "0";
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//获取广告图片
			loadAdvList() {

				var me = this;
				uni.request({
					url: me.$rootUrl + '/Adv/GetList',
					data: {
						page: 1,
						pageSize: 5,
						type: '广告',
						CityId: me.city.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							if (res.data.items.length > 0) {
								me.advList = res.data.items;
							} else {
								me.advList = [{
									thumb: "",
									appid: ""
								}];
							}

							me.loadCount++;
							me.swiperIndex1 = "0";
							me.swiperIndex2 = "0";
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});

			},
			//轮播图切换修改背景色
			swiperChange1(e) {
				this.swiperIndex1 = e.detail.current;
			},
			swiperChange2(e) {
				this.swiperIndex2 = e.detail.current;
			},
			showAdv() {
				var me=this;
				uni.request({
						url: me.$rootUrl + '/Adv/FindByName',
						data: {
							name: "公告"
						},
						method: 'GET',
						success(res) {
							if (res.data.success&&res.data.data.enabled) {
								
								me.advContent = res.data.data;
								me.modalName = "Modal";
							} else {
							
							}
						},
						fail() {
							uni.showModal({
								content: me.connectionFailText,
								showCancel: false
							});
						}
					});
				
				
			},
			hideAdv(e) {
				this.modalName = null
			},
		}
	};
</script>
<style lang="scss">
	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}


	.content {


		.pullDown-effects {
			position: fixed;
			//top: calc(100upx - 36vw);
			top: 0;
			z-index: 9;
			width: 100%;
			height: 36vw;
			/*  #ifdef  APP-PLUS  */
			padding-top: var(--status-bar-height);

			/*  #endif  */
			image {
				width: 100%;
				height: 36vw;
			}
		}

		.status {
			width: 100%;
			height: 0;
			position: fixed;
			z-index: 10;
			background-color: #fff;
			top: 0;
			/*  #ifdef  APP-PLUS  */
			height: var(--status-bar-height); //覆盖样式
			/*  #endif  */
		}

		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 10;
			background-color: #fff;

			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */

			.addr {
				width: 150upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;

				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}

			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;

				// .icon {
				// 	display: flex;
				// 	align-items: center;
				// 	position: absolute;
				// 	top: 0;
				// 	right: 0;
				// 	width: 60upx;
				// 	height: 60upx;
				// 	font-size: 34upx;
				// 	color: #c0c0c0;

				// }
				.icon {
					padding: 0 15upx;

					&.icon-del {
						font-size: 38upx;

						&:before {
							content: "\e644";
						}
					}

					&.icon-serach:before {
						content: "\e61c";
					}
				}

				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}

			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.place {
			background-color: #ffffff;
			height: 100upx;
			/*  #ifdef  APP-PLUS  */
			margin-top: var(--status-bar-height);
			/*  #endif  */
		}

		.swiper {
			width: 100%;
			margin-top: 10upx;
			display: flex;
			justify-content: center;

			.swiper-box {
				width: 96%;

				overflow: hidden;
				border-radius: 15upx;
				box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
				//兼容ios，微信小程序
				position: relative;
				z-index: 1;

				swiper {
					width: 100%;
					height: 30vh;

					swiper-item {
						image {

							height: 30vh;
							width: 100%;
						}
					}
				}

				.indicator {
					position: absolute;
					bottom: 20upx;
					left: 20upx;
					background-color: rgba(255, 255, 255, 0.4);
					width: 150upx;
					height: 5upx;
					border-radius: 3upx;
					overflow: hidden;
					display: flex;

					.dots {
						width: 0upx;
						background-color: rgba(255, 255, 255, 1);
						transition: all 0.3s ease-out;

						&.on {
							width: (100%/3);
						}
					}
				}
			}
		}

		.category-list {
			width: 96%;
			margin: 0 2%;
			padding: 0 0 30upx 0;
			border-bottom: solid 1rpx #ebebeb;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.category {
				width: 25%;
				margin-top: 50upx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.img {
					//width: 100%;
					display: flex;
					justify-content: center;
					background-color: #D1372C;
					border-radius: 50%;
					padding: 10px;

					image {
						width: 9vw;
						height: 9vw;
					}
				}

				.text {
					margin-top: 16upx;
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 24upx;
					color: #3c3c3c;
				}
			}
		}

		.banner {
			width: 100%;
			margin: 40upx 0;

			swiper {
				height: 20vw;

				image {
					width: 100%;
					height: 20vw;
					box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
				}
			}


		}

		.location {
			display: flex;
			flex-direction: row;

			.icon {
				align-content: center;
			}
		}

		.promotion {
			width: 98%;
			margin: 0 1%;

		}

		.guwen {
			width: 98%;
			margin: 0 1%;

			.text {
				width: 100%;

				line-height: 50upx;
				font-size: 20upx;
				font-weight: 600;
				border-left: blue 2px solid;
				color: #3c3c3c;
				border-bottom: solid 1rpx #ebebeb;
				border-top: solid 1rpx #ebebeb;
			}

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 20upx 0;

				.column {
					width: 32%;
					padding: 15upx 1%;
					border-radius: 20upx;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					background-color: #EBD4EF;
					text-align: center;
					align-items: center;

					.top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 5upx;

						image {
							width: 20vw;
							height: 20vw;
							border-radius: 100%;
							maring: 0 auto;
						}

						.title {
							font-size: 30upx;
						}
					}

					.center {
						width: 100%;

						.name {
							font-size: 32upx;
						}

						.info {
							width: 100%;
							align-items: center;
							line-height: 50upx;
							color: #999999;
						}

					}

					.bottom {
						align-items: center;
						justify-content: center;
						border-radius: 20upx;
						width: 100%;

						button {
							height: 60upx;
							line-height: 60upx;
						}
					}

				}
			}
		}

		.news {
			width: 98%;
			margin: 0 1%;

			.text {
				width: 100%;
				color: #3c3c3c;
				line-height: 40upx;
				font-size: 20upx;
				font-weight: 600;
				border-left: blue 2px solid;
				border-bottom: solid 1rpx #ebebeb;
			}

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.row {
					width: 100%;
					display: flex;
					flex-direction: row;
					border-bottom: solid 1rpx #ebebeb;

					.img {
						width: 100%;
						align-items: center;
						justify-content: center;
						margin-bottom: 5upx;
						flex: 1;

						image {
							width: 40vw;
							height: 30vw;
						}

					}

					.info {
						flex: 2;
						display: flex;
						flex-direction: column;
						padding: 10px;

						.name {
							flex: 1;
							font-size: 30upx;
						}

						.info {
							flex: 1;
							font-size: 20upx;
							color: #999999;
						}

					}



				}
			}
		}
	}

	//HM修改 把字体改成本地加载
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8fEg3AAABfAAAAFZjbWFws6gbWQAAAeQAAAGcZ2x5ZqgAaogAAAOMAAABMGhlYWQTyEk0AAAA4AAAADZoaGVhB90DhQAAALwAAAAkaG10eBAA//8AAAHUAAAAEGxvY2EA0gBOAAADgAAAAAptYXhwARIANgAAARgAAAAgbmFtZT5U/n0AAAS8AAACbXBvc3SanfjSAAAHLAAAAEUAAQAAA4D/gABcBAD//wAABAAAAQAAAAAAAAAAAAAAAAAAAAQAAQAAAAEAAL8Cm/NfDzz1AAsEAAAAAADYVQKbAAAAANhVApv///+ABAADgQAAAAgAAgAAAAAAAAABAAAABAAqAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5gbmRAOA/4AAXAOBAIAAAAABAAAAAAAABAAAAAQA//8EAAAABAAAAAAAAAUAAAADAAAALAAAAAQAAAFoAAEAAAAAAGIAAwABAAAALAADAAoAAAFoAAQANgAAAAgACAACAADmBuYc5kT//wAA5gbmHOZE//8AAAAAAAAAAQAIAAgACAAAAAIAAQADAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAA0AAAAAAAAAAMAAOYGAADmBgAAAAIAAOYcAADmHAAAAAEAAOZEAADmRAAAAAMAAAAAADoATgCYAAAAAv///4AEAAOAABMAHwAABQYiLwEGJCcmAjc2JBcWEgcXFhQBJiAHBhQXFiA3NjQD7RQyFMaG/sl9hw2BiQFqjXgTZccT/sBo/spoPz9oATZoPm0TE8dhDG6FAW2OhwaGfv6+h8YUMgLThoZV0FWGhlnMAAABAAD/gAMAA4EABQAACQE1CQE1AQACAP6IAXgBgP4AiAF4AXiIAAAABAAA//4DlAMnABAAIQAlACkAAAUuAzQ+AjIWFxYQBw4BAyIOAhQeAjI2NzYQJy4BFwEnAQU3AQcCAFKScz09c5Kkkjp2djqSUkiBZjU1ZoGQgTNoaDOBfP6YIAFo/qQgAVwgAgE9cpOjknM9PTl8/r18OT0C9zVmgZCBZTU1Mm4BHW0zNb/+mCABZysf/qQgAAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAECAQMBBAEFAAZzb3VzdW8IamlhbnRvdTQHc2hhbmNodQAAAAAA');
	}


	.icon {
		font-family: iconfont;
		font-size: 32upx;
		font-style: normal;
		color: #999;

	}
</style>
